<template>
  <div class="header">
    <el-row class="header-top">
      <el-col class="back" :span="4">
        <svg @click="back" class="icon" aria-hidden="true">
          <use xlink:href="#iconfanhui" />
        </svg>
      </el-col>
      <el-col :span="16"></el-col>
      <el-col :span="4">
        <div class="content">
          <component :is="who"></component>
        </div>
      </el-col>
    </el-row>

    <transition
      enter-active-class="animated fadeIn faster"
      leave-active-class="animated fadeOut faster"
    >
      <Login v-if="login" />
    </transition>
  </div>
</template>
<script>
import { Row, Col } from "element-ui";
export default {
  data() {
    return {
      who: ""
    };
  },
  components: {
    ElRow: Row,
    ElCol: Col,
    avatar: () => import("./components/avatar"),
    loginItem: () => import("./components/loginItem"),
    none: () => import("./components/none"),
    Login: () => import("@/commonPages/commonComponents/Login")
  },
  computed: {
    login() {
      return this.$store.state.login.showLogin;
    },
    loginStatus() {
      return this.$store.state.login.loginStatus;
    }
  },
  methods: {
    toHome() {
      this.$router.push("/");
    },
    back() {
      window.history.go(-1)
    }
  },
  watch: {
    login(newValue) {
      if (newValue) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "visible";
      }
    },
    loginStatus(newValue, oldValue) {
      if (newValue + oldValue === 1) return;
      if (newValue === 1) {
        this.who = "avatar";
      } else if (newValue === 2) {
        this.who = "loginItem";
      } else {
        this.who = "none";
      }
    }
  },
  mounted() {
    let loginStatus = this.$store.state.login.loginStatus;
    if (loginStatus == 1) {
      this.who = "avatar";
    } else if (loginStatus == 2) {
      this.who = "loginItem";
    } else {
      this.who = "none";
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/common.scss";
@media screen and (max-width: 576px) {
  .header {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    &-top {
      height: 100%;
      width: 100%;
      .back {
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 30px;
          height: 30px;
        }
      }
    }
    &-bottom {
      height: 40%;
    }
    .el-col {
      height: 100%;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .content {
      box-sizing: border-box;
      padding: 5px;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
